<template>
	<jf-navigation through>
		<template #right>
			<view class="guide_jump" @click="handleJump()" v-if="data.version">{{$t('guide.jump')}}</view>
		</template>
	</jf-navigation>
	
	<image src="@/static/images/guide/bg.png" class="bg"></image>
	
	<view class="guide_container">
		<swiper :indicator-dots="true" :duration="1000" indicator-active-color="#3972FF" indicator-color="#FFFFFF" class="guide_swiper" disable-touch :current="data.currentIndex" v-if="data.version">
			<swiper-item v-for="(item,index) in data.list" :key="index">
				<view class="guide_swiper_item">
					<view class="guide_title">{{$t(item.title)}}</view>
					<view class="guide_remark">{{$t(item.remark)}}</view>
					<image :src="item.icon" class="guide_icon"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="guide_btn" v-if="data.version">
			<zq-button-ts width="327" @click="handleNext()">{{$t(data.currentIndex < 2 ? 'guide.next' : 'guide.experience')}}</zq-button-ts>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { nextTick, onMounted, reactive } from "vue"
	import icon001 from "@/static/images/guide/icon001.png"
	import icon002 from "@/static/images/guide/icon002.png"
	import icon003 from "@/static/images/guide/icon003.png"
	import { getUserinfo } from "@/api/login"
	import { useStore } from "@/store/main"
	
	const store = useStore()
	const data = reactive({
		list: [
			{ title: "guide.title1", remark: "guide.remark1", icon: icon001 },
			{ title: "guide.title2", remark: "guide.remark2", icon: icon002 },
			{ title: "guide.title3", remark: "guide.remark3", icon: icon003 }
		],
		currentIndex: 0,
		version: ""
	})
	
	const handleJump = ():void =>{
		uni.setStorageSync("version", data.version);
		getUserinfo().then((res:any) => {
			store.setUserinfo(res.data)
			store.saveIp()
			uni.redirectTo({ url:"/pages/index/index" })
		}).catch(() => {
			uni.setStorageSync('token', null)
			uni.redirectTo({ url:"/pages/login/login" })
		})
	}
	const handleNext = ():void =>{
		if(data.currentIndex < 2){
			data.currentIndex ++
		}else{
			handleJump()
		}
	}
	// uni.clearStorage()
	onMounted(()=>{
		nextTick(()=>{
			store.saveCountryList()
			store.saveClassifyList()
			// #ifdef APP-PLUS
			uni.getSystemInfo({
				success: (result) => {
					if(result.appWgtVersion === uni.getStorageSync("version")){
						handleJump()
						uni.setStorageSync("version", result.appWgtVersion);
					}else{
						data.version = result.appWgtVersion;
					}
				}
			})
			// #endif
			// #ifdef MP-WEIXIN
				handleJump()
			// #endif
		})
	})
</script>

<style lang="scss">
	.guide_jump{
		font-size: 28rpx;
		color: var(--color-primary);
		font-weight: 400;
	}
	.guide_container{
		position: fixed;
		width: 100vw;
		height: 100vh;
		.guide_swiper{
			width: 750rpx;
			height: calc(100vh - 320rpx);
			.guide_swiper_item{
				width: 750rpx;
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				.guide_title{
					font-size: 48rpx;
					color: var(--color-primary);
					padding-top: 180rpx;
					line-height: 67rpx;
					font-weight: 500;
				}
				.guide_remark{
					font-size: 32rpx;
					color: var(--color-primary);
					margin-top: 12rpx;
					line-height: 45rpx;
					font-weight: 400;
				}
				.guide_icon{
					width: 520rpx;
					height: 390rpx;
					margin-top: 112rpx;
				}
			}
		}
		.guide_btn{
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			margin-top: 50rpx;
		}
	}
</style>
